<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rock Paper Scissors Game</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="game-container">
        <header class="game-header">
            <h1 class="game-title">Rock Paper Scissors</h1>
            <p class="game-subtitle">Challenge the computer in this classic game!</p>
        </header>

        <div class="score-board">
            <div class="score-card player-score">
                <h3>You</h3>
                <div class="score" id="playerScore">0</div>
            </div>
            <div class="vs">VS</div>
            <div class="score-card computer-score">
                <h3>Computer</h3>
                <div class="score" id="computerScore">0</div>
            </div>
        </div>

        <div class="game-area">
            <div class="choice-display">
                <div class="player-choice" id="playerChoice">
                    <div class="choice-icon">❓</div>
                    <p>You chose:</p>
                    <h3 id="playerChoiceText">Make your move!</h3>
                </div>

               <div class="result-display" id="gameResult" role="status" aria-live="polite" aria-atomic="true">
                    <h2>Choose your move to start!</h2>
                </div>

                <div class="computer-choice" id="computerChoice">
                    <div class="choice-icon">❓</div>
                    <p>Computer chose:</p>
                    <h3 id="computerChoiceText">Waiting...</h3>
                </div>
            </div>

            <div class="controls">
                            <button type="button" class="choice-btn rock" id="rockBtn" data-choice="rock" aria-keyshortcuts="R" aria-label="Select Rock (R)">
	                    <span class="emoji">🪨</span>
	                    <span class="label">Rock</span>
	                </button>
	                <button type="button" class="choice-btn paper" id="paperBtn" data-choice="paper" aria-keyshortcuts="P" aria-label="Select Paper (P)">
	                    <span class="emoji">📄</span>
	                    <span class="label">Paper</span>
	                </button>
	                <button type="button" class="choice-btn scissors" id="scissorsBtn" data-choice="scissors" aria-keyshortcuts="S" aria-label="Select Scissors (S)">
	                    <span class="emoji">✂️</span>
	                    <span class="label">Scissors</span>
	                </button>
	            </div>
	
	            <button type="button" class="reset-btn" id="resetBtn" aria-keyshortcuts="X" aria-label="Reset Game (X)">
                <span class="reset-icon">🔄</span>
                Reset Game
            </button>
        </div>

        <div class="round-history" id="roundHistory">
            <h3>Round History</h3>
            <div class="history-list" id="historyList">
                <ul id="historyUl"> 
                    <li class="no-history">No rounds played yet. Make your first move!</li>
                </ul>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>
